<template>
  <h2>reactive</h2>
  <p>{{ data.name }}</p>
  <p>{{ data.age }}</p>
  <p>{{ data.address }}</p>
  <button @click="change">btn</button>
</template>

<script>
// import { ref } from "vue";
import { reactive } from "vue";
// reactive用于一次性定义多个变量

export default {
  setup() {
    // const name = ref("zhangsan");
    // const age = ref(20);
    // const address = ref("九堡");

    const data = reactive({
      name: "zhangsan",
      age: 20,
      address: "九堡",
    });

    const change = () => {
      // age.value = 30;
      data.age = 30;
    };

    return {
      // name,
      // age,
      // address,
      change,
      data,
    };
  },
};
</script>
